<template>
  <div id="all">
    <div>
      <h2>bpmn使用案例</h2>
      <h3><a href="https://juejin.cn/post/6844904017584193544#bpmn.js%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E4%B8%80%E7%A7%8D%E4%BD%BF%E7%94%A8">中文基础使用教程</a></h3>

      <div>
        <div class="containers">
          <div class="canvas" ref="canvas"></div>
        </div>
      </div>
      <h6>引入案例地址：https://segmentfault.com/a/1190000039701868</h6>
    </div>
  </div>
</template>

<script>
// 引入相关的依赖
import BpmnModeler from "bpmn-js/lib/Modeler";
import { xmlStr } from "../mock/xmlStr"; // 这里是直接引用了xml字符串
export default {
  name: "",
  components: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
  mounted() {
    this.init();
  },
  data() {
    return {
      // bpmn建模器
      bpmnModeler: null,
      container: null,
      canvas: null,
    };
  },
  methods: {
    init() {
      // 获取到属性ref为“canvas”的dom节点
      const canvas = this.$refs.canvas;
      // 建模
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
      });
      this.createNewDiagram();
    },
    createNewDiagram() {
      // 将字符串转换成图显示出来
      console.log("xmlStr", xmlStr);
      this.bpmnModeler.importXML(xmlStr, (err) => {
        // this.bpmnModeler.importXML({}, (err) => {
        if (err) {
          // console.error(err)
        } else {
          // 这里是成功之后的回调, 可以在这里做一系列事情
          this.success();
        }
      });
    },
    success() {
      // console.log('创建成功!')
    },
  },
};
</script>

<style scoped="scoped">
.containers {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.canvas {
  width: 100%;
  height: 100%;
}
.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
</style>
